import React, {useReducer} from 'react'
import SearchForm from '@/components/SearchForm'
import {Button, Card, Form, Input, Popconfirm, Select, Table} from 'antd'
import useRefHeight from "@/hooks/useRefHeight.ts";
import useScrollHeight from "@/hooks/useScrollHeight.ts";
import useSearchTable from "@/hooks/useSearchTable.ts";
import {deleteExpert, getExpertPage} from "@/services/emergency";
import {PlusOutlined} from '@ant-design/icons';
import EditModal from "./EditModal";
import useTableOperation from "@/hooks/useTableOperation";


const {useForm} = Form
const EmergencyPlan: React.FC = () => {
  const [form] = useForm()
  const [editData, dispatchEditData] = useReducer(
    (state: any, {clear, ...action}: any) => {
      return clear ? {
        title: '新增专家',
        ...action
      } : {
        ...state,
        ...action
      }
    },
    {
      title: '新增专家',
      open: false,
    }
  )
  const {
    search,
    refresh,
    getOrder,
    tableProps
  } = useSearchTable((params: any) => {
    return getExpertPage(params)
  }, form)
  const {
    isLoading: loadingDelete,
    run: runDelete
  } = useTableOperation(deleteExpert, refresh);
  const columns: any = [
    {
      title: '序号',
      width: 80,
      render: (_1: any, _2: any, index: number) => getOrder(index)
    },
    {
      title: '姓名',
      dataIndex: 'name',
      key: 'name',
      width: 100,
    },
    {
      title: '性别',
      dataIndex: 'sex',
      key: 'sex',
      width: 60,
      render(value: any) {
        return value === 1 ? '男' : '女';
      },
    },
    {
      title: '出生年月',
      dataIndex: 'bornDate',
      key: 'bornDate',
      width: 150,
    },
    {
      title: '专业',
      dataIndex: 'speciality',
      key: 'speciality',
    },
    {
      title: '工作单位',
      dataIndex: 'workAddress',
      key: 'workAddress',
    },
    {
      title: '住址',
      dataIndex: 'homeAddress',
      key: 'homeAddress',
    },
    {
      title: '擅长事故类型',
      dataIndex: 'goodAt',
      key: 'goodAt',
    },
    {
      title: '办公电话',
      dataIndex: 'departmentTel',
      key: 'departmentTel',
      width: 180,
    },
    {
      title: '手机',
      dataIndex: 'phoneNumber',
      key: 'phoneNumber',
      width: 180,
    },
    {
      title: '操作',
      width: 100,
      dataIndex: 'id',
      key: 'id',
      render(expertId: any) {
        return (
          <div>
            <Button
              type='link' style={{marginLeft: 0}}
              onClick={() => {
                dispatchEditData({
                  expertId,
                  title: '修改专家',
                  open: true,
                })
                // openEdit(record.id);
              }}
            >
              修改
            </Button>
            <Popconfirm
              title="确定要删除该专家吗？"
              okText="确定"
              cancelText="取消"
              overlayStyle={{width: '200px'}}
              onConfirm={() => {
                runDelete({
                  id: expertId
                }, expertId);
              }}
            >
              <Button type='link' style={{marginLeft: 0}} loading={loadingDelete(expertId)}>删除</Button>
            </Popconfirm>
          </div>
        );
      },
    },
  ]

  // 动态计算表格高度
  const [searchFormRef, searchFormHeight, refreshHeight] = useRefHeight();
  const [toolbarRef, toolbarHeight] = useRefHeight();
  const scrollHeight = useScrollHeight({
    pagination: true,
    tableHead: true,
    deps: [searchFormHeight, toolbarHeight]
  });
  return (
    <div>
      <div className="pb-[12px]" ref={searchFormRef}>
        <Card>
          <SearchForm form={form} onReset={search} onFinish={search} onResize={() => refreshHeight()}>
            <Form.Item name="name" label="姓名">
              <Input/>
            </Form.Item>
            <Form.Item name="sex" label="性别">
              <Select
                placeholder="请选择"
                options={[{
                  label: '男',
                  value: 1
                }, {
                  label: '女',
                  value: 2
                }]}
              ></Select>
            </Form.Item>
          </SearchForm>
        </Card>
      </div>
      <Card>
        <div className="pb-[8px]" ref={toolbarRef}>
          <Button
            type="primary"
            onClick={() => {
              dispatchEditData({
                expertId: null,
                title: '新增专家',
                open: true,
              })
            }}
            icon={<PlusOutlined/>}
          >
            新增专家
          </Button>
        </div>
        <Table
          columns={columns}
          rowKey="id"
          scroll={{y: scrollHeight}}
          {...tableProps}
        />
      </Card>
      <EditModal
        {...editData}
        dispatch={dispatchEditData}
        bodyStyle={{height: '600px', overflowY: 'auto'}}
        onSuccess={() => {
          refresh()
        }}
        width={1000}
      />
    </div>
  )
}

export default EmergencyPlan
